// webpack.config.js
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const Utils = require("./build/utils");
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    // entry: Utils.entries(),
    entry: {
        // app: resolve("src/main.js"),
        // app: resolve("src/client.js"),
        app: resolve("src/main.js"),
    },
    // externals: {
    //     vue: "Vue",
    //     "vue-router": "VueRouter",
    //     "element-ui": "ELEMENT",
    // },
    mode: "development",
    output: {
        path: resolve("dist"),
        filename: "./js/bundle.[name].[hash].js",
        chunkFilename: "./js/bundle.[name].[hash].js",
    },
    // 代码分离
    optimization: {
        runtimeChunk: {
            name: "manifest",
        },
        splitChunks: {
            chunks: "all",
        },
    },
    resolve: {
        // 自动解析文件扩展名(补全文件后缀)(从左->右)
        // import hello from './hello'  （!hello.js? -> !hello.jsx? -> !hello.json）
        extensions: [".js", ".jsx", ".json"],
        alias: {
            "@": resolve("src"),
        },
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                use: ["vue-loader"], // +++
            },
            {
                //     test: /\.css$/,
                //     use: ExtractTextPlugin.extract({
                //         fallback: "vue-style-loader", // 编译后用什么loader来提取css文件
                //         use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
                //     })
                // }, {
                //第一种, 需要用到的loader简单的放在use数组里
                //第一种, 需要用到的loader简单的放在use数组里
                test: /\.(le|c)ss$/,
                use: [
                    process.env.NODE_ENV !== "production" ? "vue-style-loader" : MiniCssExtractPlugin.loader,
                    "vue-style-loader",
                    "css-loader",
                    //"postcss-loader",
                    "less-loader",
                ],
            },
            // {
            //   // 第二种，use里面是一个个对象，这种方式可以给loader进行配置
            //   test: /\.css$/,
            //   use: [
            //     {
            //       loader: "postcss-loader",
            //       options: {
            //         limit: 1000,
            //         name: "./css/[name].[ext]?[hash]",
            //         ident: "postcss",
            //         plugins: [require("autoprefixer")],
            //       },
            //     },
            //   ],
            // },
            {
                test: /\.s[ac]ss$/,
                use: ["sass-loader"],
            },
            {
                //第三种，单个loader和对象loader一起放在use数组里
                test: /\.(png|jpg|jpeg|gif|svg)$/i,
                use: [
                    // "url-loader",
                    {
                        loader: "file-loader",
                        options: {
                            limit: 1000,
                            name: "./images/[name].[ext]?[hash]",
                            esModule: false,
                        },
                    },
                    {
                        loader: "image-webpack-loader",
                        options: {
                            pngquant: {
                                enabled: false,
                                limit: 1000,
                                name: "./images/[name].[ext]?[hash]",
                                quality: [0.6, 0.8],
                            },
                        },
                    },
                ],
            },
            {
                //
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
                loader: "url-loader",
                options: {
                    limit: 1000,
                    name: "./fonts/[name].[hash].[ext]",
                },
            },
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            // 使用vue官方的懒加载语法并结合babel需使用这个插件，不然会报错
                            plugins: ["@babel/plugin-syntax-dynamic-import"],
                        },
                    },
                ],
            },
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: ["ts-loader"],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            minify: {
                removeAttributeQuotes: true, // 移除属性的引号
            },
        }),
        // new ExtractTextPlugin('./[name].[hash].css'),
        new Webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，启用热更新 第三步
        // new CleanWebpackPlugin(),
    ],
    //.concat(Utils.htmlPlugin()),
    // devServer: {
    //     port: 3000,
    //     contentBase: "dist",
    //     process: true,
    //     // host: "localhost",
    //     // hot: true,
    //     // open: true,
    // },
};
